<template>
  <view class="my-box">
    <view class="head-box">
      <view class="user-box flex items-center">
        <button
          class="choice-btn"
          v-if="!userInfo.headImg"
          open-type="chooseAvatar"
          @chooseavatar="chooseavatar"
        >
          <img class="hp-c" src="../../static/headImg.png" alt="" />
        </button>
        <img v-else class="hp" :src="userInfo.headImg" alt="" />
        <view>
          <view class="name" v-if="!userInfo.userName">
            <input
              v-model="nickName"
              type="nickname"
              placeholder="点击获取昵称"
              placeholder-style="color: #fff"
              @change="confimNick"
            />
            <!-- <text @click="inputNick">点击获取昵称</text> -->
          </view>
          <view v-else class="name">{{ userInfo.userName }}</view>
          <view class="phone" v-if="!userInfo.phones">
            <button open-type="getPhoneNumber" @getphonenumber="bindPhone">
              <text class="a">点击获取电话</text>
            </button>
          </view>
          <view v-else class="phone">{{ userInfo.phones }}</view>
        </view>
      </view>
      <img class="bg-img" src="../../static/login-bg.png" alt="" />
    </view>
    <view class="content-box flex justify-center">
      <view class="col-box">
        <view
          class="flex justify-between items-center"
          @click="enterDetail('/pages/complaints/complaints')"
        >
          <image src="../../static/i-1.png" mode="widthFix"></image>
          <view class="flex-1"> 投诉建议 </view>
          <image src="../../static/right.png" mode="widthFix"></image>
        </view>
        <view
          class="flex justify-between items-center"
          @click="enterDetail('/pages/helpCenter/helpCenter')"
        >
          <image src="../../static/i-2.png" mode="widthFix"></image>
          <view class="flex-1"> 帮助中心 </view>
          <image src="../../static/right.png" mode="widthFix"></image>
        </view>
        <view
          v-if="userInfo.type === 1"
          class="flex justify-between items-center"
          @click="enterDetail('/pages/writeOff/writeOff')"
        >
          <image src="../../static/hx.png" mode="widthFix"></image>
          <view class="flex-1"> 活动核销 </view>
          <image src="../../static/right.png" mode="widthFix"></image>
        </view>
        <view
          class="flex justify-between items-center"
          @click="enterDetail('/pages/ask/ask/ask')"
        >
          <image src="../../static/wj.png" mode="widthFix"></image>
          <view class="flex-1"> 我参与的问卷调查 </view>
          <image src="../../static/right.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <Loading ref="loading"></Loading>
  </view>
</template>

<script>
import Loading from "@/components/loding.vue";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import uniPopupDialog from "../../components/uni-popup-dialog/uni-popup-dialog.vue";
import { baseUrl, request } from "@/utils/request.js";
export default {
  components: {
    uniPopup,
    uniPopupDialog,
    Loading,
  },
  data() {
    return {
      userInfo: {
        id: "",
        headImg: "",
        userName: "",
        phones: "",
        type: 0,
      },
      nickName: "",
    };
  },
  methods: {
    enterDetail(path) {
      uni.navigateTo({
        url: path,
      });
    },
    inputNick() {
      this.$refs.nickDialog.open();
    },
    confimNick(e) {
			console.log('this.nickName', this.nickName, e)
			let nickName = this.nickName
			if (e.detail && e.detail.value ) {
				nickName = e.detail.value
			}
			if (nickName) {
				this.setUserInfo({ userName: nickName }, () => {
					  this.userInfo.userName = nickName;
				})
			}
			
		
    },
    bindPhone(res) {
      if (res.detail.code) {
        request("/api/bindPhone", { code: res.detail.code }, "get").then(
          (res) => {
            if (res.data.code === 200) {
              // this.setUserInfo({ phones: res.data.data.phones })
              this.userInfo.phones = res.data.data.phones;
            }
          }
        );
      }
    },
    setUserInfo(params, cb) {
      request(
        "/api/settingUserInfo",
        { id: this.userInfo.id, ...params },
        "post"
      ).then((res) => {
        if (res.data.code === 200) {
          cb && cb();
        } else {
          uni.showToast({
            title: "修改失败，请重试！",
            icon: "error",
          });
        }
      });
    },
    chooseavatar(res) {
      uni.uploadFile({
        url: baseUrl + "/common/minio/upload",
        filePath: res.target.avatarUrl,
        name: "file",
        success: (resp) => {
          if (resp.statusCode === 200) {
            const resObj = JSON.parse(resp.data);
            this.setUserInfo({ headImg: resObj.url }, () => {
              this.userInfo.headImg = resObj.url;
            });
          } else {
            uni.showToast({
              title: "上传失败，请重试！",
              icon: "error",
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: "上传失败，请重试！",
            icon: "error",
          });
        },
      });
    },
  },
  onLoad() {
    this.$refs.loading.init();
    this.$refs.loading.progress = 100;
    setTimeout(() => {
      this.$refs.loading.destoryed();
    }, 500);
    const app = getApp();
    const userId = uni.getStorageSync("userId");
    // app.login()
    if (!userId) {
      app.login().then(() => {
        const userInfo = uni.getStorageSync("userInfo");
        this.userInfo = JSON.parse(userInfo);
      });
    } else {
      request("/api/userInfo", {}, "get").then((res2) => {
		this.$refs.loading.destoryed();
        uni.setStorageSync("userInfo", JSON.stringify(res2.data.data));
        const userInfo = uni.getStorageSync("userInfo");
        this.userInfo = JSON.parse(userInfo);
		
		// this.setUserInfo({ userName: '' }, () => {
		// 	  this.userInfo.userName = '';
		// })
      });
    }
  },
};
</script>

<style lang="less" scoped>
.my-box {
  height: 100vh;
  background: #aa171a;
  .hp-c {
    width: 122rpx;
    height: 122rpx;
    border-radius: 50%;
  }
  .choice-btn {
    width: 122rpx;
    height: 122rpx;
    border-radius: 50%;
    padding: 0;
  }
}

.my-box .head-box {
  position: relative;
  height: 326rpx;
}

.my-box .bg-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 326rpx;
  z-index: 0;
}

.my-box .head-box .user-box {
  position: absolute;
  top: 50%;
  left: 60rpx;
  transform: translateY(-50%);
  z-index: 1;
}

.my-box .hp {
  height: 114rpx;
  width: 114rpx;
  border-radius: 50%;
  border: 8rpx solid #fff;
}

.my-box .name {
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  color: #ffffff;
  line-height: 44rpx;
  margin-left: 45rpx;
}

.my-box .content-box {
  height: calc(100% - 302rpx);
  background: #fff;
  width: 720rpx;
  position: relative;
  top: -24rpx;
  left: 15rpx;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding-top: 24rpx;
}

.my-box .content-box .col-box {
  width: 624rpx;
  padding: 0 30rpx;

  & > view {
    height: 138rpx;
    font-size: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    color: #333333;
    border-bottom: 1px solid #d9d9d9;

    & > image:first-child {
      width: 44rpx;
      height: 0;
      margin: 0 34rpx 0 0;
    }

    & > image:last-child {
      width: 15rpx;
      height: 0;
    }
  }
}

.my-box .collapse-title {
  height: 135rpx;
}

.my-box .collapse-title > text {
  margin-left: 32rpx;
}

.my-box .head-box .user-box {
  .name {
    font-size: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    line-height: 44rpx;
  }
  .phone {
    margin-left: 45rpx;
    margin-top: 22rpx;
    font-size: 28rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    line-height: 44rpx;
    > button {
      width: 200rpx;
      height: 44rpx;
      padding: 0;
      margin: 0;
      background: transparent;
      line-height: 1;
      text-align: left;
      &::after {
        display: none;
      }
    }
    .a {
      font-size: 28rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      line-height: 44rpx;
    }
  }
}
</style>
